<template>
    <div class="wrap">
        <div class="head">
            <i class="iconfont icon-arrdown-copy"></i>
            <span>北京</span>
            <b class="iconfont icon-diandiandian"></b>
        </div>
        <div class="nav-wrap">
            <div class="nav" ref="navScroll">
                <ul>
                    <li v-for="n in datalist" :key="n.id">{{n.name}}</li>

                </ul>
            </div>

            <div class="nav-l">1</div>
        </div>
    </div>
</template>
<script>
    
    import { get, post } from "@/api/http";
    import BScroll from "@better-scroll/core"
    import Pullup from "@better-scroll/pull-up"
    BScroll.use(Pullup)
export default {
    data(){
        return {
            datalist:[]
        }
    },
  created() {
    this.getList();
    
  },
  methods: {
    async getList() {
      let rs = await get("/api/navlist");
      this.datalist = rs.data;
      console.log(rs);
      this.$nextTick(()=>{
          this.setNavScroll();
     })
     
    },
    setNavScroll(){
            this.navScroll = new BScroll(this.$refs.navScroll,{
                scrollX:true,
                probeType:3,
                bounce:false
            })
         }
  },
}
</script>

<style lang="scss" scoped>
    .wrap{
        width: 100%;
        height: 100%;
    }
    .head{
        width: 100%;
        height: 44px;
        background: #f7f7f7;
        // position: relative;
        border-bottom: 1px solid #eee;
        // background: red;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            font-size: 18px;
            font-weight: 400;
            color: #333333;
        }
        i{
            margin-left: 16px;
            font-size: 20px;
            font-weight: 700;
            color: #2ebd59;
        }
        b{
            margin-right: 15px;
            color: #2ebd59;
            font-weight: 700;
            font-size: 20px;
        }
    }
    .nav-wrap{
        width: 100%;
        height: 46px;
        // background: crimson;
        
      
    }
      .nav-l{
            width: 48px;
            height: 46px;
            background: chartreuse;
            display: block;
            float: right;

        }
    .nav{
        width: 326px;
        height: 46px;
        // background: red;
        overflow: hidden;
        display: block;
        float: left;
        // border-bottom: 1px solid #2ebd59;
        ul{
            height: 100%;
            width: 576px;
            // display: flex;
            // flex-wrap: nowrap;
            white-space: nowrap;
            
            li{
                
                width: 96px;
                height: 44px;
                // background: sandybrown;
                float: left;
                // display: inline;
                line-height: 44px;
                text-align: center;
                font-size: 16px;
                color: #777777;
                &:nth-child(1){
                    color: #2ebd59;
                    border-bottom: 2px solid #2ebd59;
                    
                }
            }
        }
    }
</style>